<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17组件Prop类型</title>
</head>
<body>
<div id="app">
    <!--把父组件的message绑定到子组件的parentMessage，父组件的message值修改后子组件的parentMessage值也会修改-->
    <!--html标签中要用连接符，props声明和使用要遵循camel规则-->
    <!--通过props传递静态的字符串类型值时不需要加v-bind:-->
    <!--去掉v-bind:之后传递静态props，capacity是Number类型，但是在子组件中10会被解析成string类型-->
    <inner-button-counter01 parent-message="post.content" capacity="10"></inner-button-counter01>
    <!--加上v-bind:之后传递静态props，capacity是Number类型，在子组件中10会被解析成number类型-->
    <inner-button-counter01 parent-message="post.content" v-bind:capacity="10"></inner-button-counter01>
    <!--加上v-bind:之后传递属性，无论capacity是Number/String类型，post.likes是什么类型在子组件中就会被解析成什么类型-->
    <inner-button-counter01 v-bind:parent-message="post.content" v-bind:capacity="post.likes"></inner-button-counter01>
    <!--post对象中的属性会变成控件的属性-->
    <inner-button-counter01 v-bind="post" v-bind:parent-message="post.content" v-bind:capacity="post.likes"></inner-button-counter01>
    <!--加上v-bind:之后传递对象-->
    <inner-button-counter01 v-bind="post" v-bind:parent-message="post.content" v-bind:capacity="post.likes" v-bind:parent-obj="post"></inner-button-counter01>
</div>
<script src="../vue.global.3.0.5.js"></script>
<script>
    //创建局部组件(推荐)
    const innerButtonCounter01 = {
        data() {
            return {
                counter: 100
            }
        },
        //prop通信
        //props: ["parentMessage"],
        props: {
            parentObj: Object,
            parentMessage: String,
            capacity: Number
        },
        template: `
            <div>
                分离的内部组件计数器: {{counter}}
                <button v-on:click="counter++">counter++</button><br>
                <div>{{ typeof parentMessage }}-{{ parentMessage }}</div>
                <div>{{ typeof capacity }}-{{ capacity }}</div>
                <div>{{ typeof parentObj }}-{{ parentObj==undefined?"undefined":parentObj.content }}</div>
            </div>
        `
    }

    //1、创建一个Vue应用实例，本身是最顶层的根组件
    const app = Vue.createApp({
        data() {
            return { 
                message: "父组件message",
                post: {
                    content: "父组件content",
                    likes: 11
                }
            }
        },
        //定义一个局部组件，本组件是根组件的子组件(推荐)
        components: {
            "inner-button-counter01": innerButtonCounter01
        }
    });
    //2、定义一个全局组件
    app.component('button-counter', {
        //数据
        data() {
            return {counter: 100}
        },
        //模板
        template: `
            计算器: {{counter}}
            <button v-on:click="counter++">counter++</button><br>
        `   
    });
    //3、挂载
    const vm = app.mount("#app");
</script>
</body>
</html>